<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%--
  Created by IntelliJ IDEA.
  User: fanyuting
  Date: 2017/4/27 0027
  Time: 上午 9:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="zh">
<head>
    <title>风险矩阵维护页面</title>
    <%@include file="/common/header.jspf"%>
    <style>
        table{
            width: 100%;
            height:90%; min-height: 50px; line-height: 30px; text-align: center; border-color:#696969;
            border-collapse: collapse;
        }
       /* table tr th, table tr td { border-color:#b6ff00; }*/
        #matrixManage{
            height: 90%;width:7%;float: left;
            margin-left: 10px;
        }
        .matrix{
           height:100%;
            width:90%;
            float: left;
        }
        .matrix table{
            background-color: #F5F5F5;
        }
        .radioClass{
            width:17px;
            height:17px;
            cursor: pointer;
        }
        .matrixSelectTd{
            background-color: #FFFFFF;
        }
        .matrixSelectTd:hover{
            background-color: #AFEEEE;
            cursor:pointer;
        }
    </style>
</head>
<body>
<div id="matrixManage">
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="people" checked />人员伤害</div>
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="money" />财产损失 </div>
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="environment" />环境影响 </div>
    <div style="line-height: 30px;"><input class="radioClass" name="resultType" type="radio" value="prestige" />声誉影响 </div>
</div>
<!--人员伤害-->
<div id="peopleMatrix" class="matrix">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">人员伤害</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.people}</td>
                <c:forEach items="${possibilities}" var="pos1">
                        <td class="matrixSelectTd"
                    <c:forEach items="${matrixLevels}" var="ml">
                        <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                            <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                style="background-color:#${l.color};"
                            </c:if></c:forEach>
                        </c:if>
                    </c:forEach>
                            onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>

                </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>
<!--财产损失-->
<div id="moneyMatrix" class="matrix" >
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">财产损失</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.money}</td>
            <c:forEach items="${possibilities}" var="pos1">
                <td class="matrixSelectTd"
                        <c:forEach items="${matrixLevels}" var="ml">
                            <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                                <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                    style="background-color:#${l.color};"
                                </c:if></c:forEach>
                            </c:if>
                        </c:forEach>
                    onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>
            </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>

<!--环保矩阵-->
<div id="environmentMatrix" class="matrix">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">环保影响</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.environment}</td>
                <c:forEach items="${possibilities}" var="pos1">
                    <td class="matrixSelectTd"
                            <c:forEach items="${matrixLevels}" var="ml">
                                <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                                    <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                        style="background-color:#${l.color};"
                                    </c:if></c:forEach>
                                </c:if>
                            </c:forEach>
                        onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>
                </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>
<!--声誉影响矩阵-->
<div id="prestigeMatrix" class="matrix">
    <table border="1" cellspacing="0" cellpadding="0" >
        <tr>
            <td rowspan="3">后果严重等级</td>
            <td>事故后果</td>
            <td colspan="${fn:length(possibilities)}">发生的可能性</td>
        </tr>
        <tr>
            <td rowspan="2">声誉影响</td>
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.description}</td>
            </c:forEach>
        </tr>
        <tr style="height: 20px;">
            <c:forEach items="${possibilities}" var="pos" >
                <td>${pos.grade}</td>
            </c:forEach>
        </tr>
        <c:forEach items="${results}" var="res">
            <tr>
                <td>${res.grade}</td>
                <td width="300">${res.prestige}</td>
                <c:forEach items="${possibilities}" var="pos1">
                    <td class="matrixSelectTd"
                            <c:forEach items="${matrixLevels}" var="ml">
                                <c:if test="${ml.resultGrade==res.grade and ml.possibilityGrade ==pos1.grade }">
                                    <c:forEach items="${levels}" var="l"><c:if test="${l.grade==ml.levelGrade}">
                                        style="background-color:#${l.color};"
                                    </c:if></c:forEach>
                                </c:if>
                            </c:forEach>
                        onclick="manageRiskGrade(this,'${res.grade}','${pos1.grade}');">${res.grade}${pos1.grade}</td>
                </c:forEach>
            </tr>
        </c:forEach>
    </table>
</div>
<div id="selectRiskLevel" style="width: 100%;display: none;" align="center">
    <form id="levelGradeForm">
    <div style="width: 100%; margin-top: 20px;">
        矩阵值：<span id="selectRiskLevel_matrix"  style="width: 100px;"></span>
        <%--风险可能性等级：
        风险后果等级：<input id="selectRiskLevel_result" class="easyui-textbox" style="width: 120px;" readonly>--%>
        <input type="hidden" id="selectRiskLevel_result" name="resultGrade">
        <input type="hidden" id="selectRiskLevel_possibility" name="possibilityGrade">
    </div>
    <div style="width: 100%; margin-top: 10px;">
        对应风险等级：
        <select class="easyui-combox" style="width: 200px;height: 30px;" name="levelGrade" id="levelGrade">
            <c:forEach items="${levels}" var="level">
                <option value="${level.grade}" color="${level.color}"<%-- style="background-colorkg: #${level.color};"--%>>${level.name}</option>
            </c:forEach>
        </select>
    </div>
    </form>
    <div class="" style="margin:100px auto;width: 100px;">
        <a class="button icon-save" id="btn_save">
            保存
        </a>
    </div>
</div>
</body>
<script type="text/javascript">
    var index = "";
    var td = null;
    $("input[name='resultType']").on("click",function(){
        var resultType= this.value;
        $(".matrix").hide();
        $("#"+resultType+"Matrix").show();
    });
    /**
     * 保存按钮的方法
     */
    $("#btn_save").on("click",function(){
        //序列化表单数据
        var data = $("#levelGradeForm").serializeArray();
        $.ajax({
            url:ROOT_PATH + '/risk/matrix/addRiskMatrixLevelInfo.shtml',//提交地址
            data:data,//将表单数据序列化
            type:"POST",
            dataType:"json",
            success:function(result){
                if (result.success){
                    layer.msg(result.message,{time:1000,icon:1},function(){
                        var color = $("#levelGrade option:selected").attr("color");
                        $(td).css("background-color",'#'+color);
                        layer.close(index);
                    });
                }else{
                    layer.msg(result.message,{time:1000,icon:1},function(){
                        //parent.layer.close(layerIndex);
                    });
                }
            }
        });
    });
function manageRiskGrade(obj,resultGrade,possibilityGrade){
   // alert(resultGrade);
   // alert(obj.value);
    td = obj;
    $("#selectRiskLevel_matrix").html(resultGrade+''+possibilityGrade);
    $("#selectRiskLevel_possibility").val(possibilityGrade);
    $("#selectRiskLevel_result").val(resultGrade);
    $('#selectRiskLevel').show();
    index = layer.open({
        type: 1,
        content: $('#selectRiskLevel') ,
        area: ['500px', '50%'],
        end:function(){
            $('#selectRiskLevel').hide();
        }
    });


}
</script>
</html>
